<template>
	<view>
		<view class="top">
			<view class="cont" :style="{'paddingTop': statusBar+'px'}">
				<image @click="jumpPage('tuan/ss')" src="@/static/search2.png"></image>
				{{$t('pages/client/index')}}
			</view>
		</view>
		<view class="content" :style="{'top': statusBar+45+'px'}">
			<view class="topbj"></view>
			<view class="home-header">
				<home-banner :banners="banners"></home-banner>
			</view>
			<view class="integral-mall-main plr15" style="margin-top: 30upx; background: #fff; padding: 20rpx 0rpx;">
				<view class="" v-if="hotdata[1]" style="overflow: hidden;">
					<view class="flex alcenter space plr15">
						<view class="flex alcenter">
							<image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[9]"></image>
							<text class="ft16 ftw600 cl-main ml15 alpsoftjurnal">{{$t('video.title3')}}</text>
						</view>
					</view>
					<BannerVideo2 :data="hotdata"></BannerVideo2>
				</view>
			</view>
			<home-default :key="defaultKey"></home-default>
		</view>
		<home-windowing :key="defaultKey" :data="windowList" :left="left"></home-windowing>
	</view>
</template>
<script>
	import BannerVideo2 from "@/components/banner-video2/index.vue"
	import util from "../../utils/util"
	export default {
		components: {
			BannerVideo2
		},
		data() {
			return {
				hyh: 0,
				datasa: [],
				banners: [],
				hotdata: [],
				givedata: [],
				scrollTop: 0,
				params: {
					page: 1,
					page_size: 10
				},
				listtg: [],
				totaltg: 0,
				statusBar: 0,
				defaultKey: '',
				windowList: {},
				left: 0
			}
		},
		onLoad(e) {
			this.articleList()
			uni.getSystemInfo({
				success: (e) => {
					this.statusBar = e.statusBarHeight //状态栏高度
				}
			})
		},
		onShow() {
			this.getList();
			this.defaultKey = new Date().getTime()
			console.log('defaultKey', this.defaultKey);
			this.getwindowList()
			util.setTabbar()
			this.$nextTick(() => {
				uni.loadFontFace({
				  family: 'font-wwe',
				  source: 'url("https://anjur.pro.aisisoft.com.cn/AlpsoftJurnal.ttf")',
				  success(res) {
					  console.log('success', res)
				  },
				  fail(e) {
					  console.log('fail', e);
				  }
				})
			})
		},
		onPageScroll(e) {
		    console.log('Page scrolled, scrollTop:', e.scrollTop);
			this.left = -145
			setTimeout(() => {
				this.left = 0
			}, 1000)
		    // Add your scroll event handling logic here
		},
		methods: {
			getwindowList() {
				let this_ = this
				let data = {};
				if (uni.getStorageSync("userinfo")) {
					data.uid = uni.getStorageSync("userinfo").id;
				}
				data.lang = uni.getStorageSync('language')
				uni.request({
					url: this.configs.webUrl + '/api/video/zuiju',
					data: data,
					success: res => {
						let {
							data
						} = res
						console.log('窗口化', data);
						if (data.new.length > 0) {
							this.windowList = data.new[0]
						}
					},
				});
			},
			lower() {
				if (this.totaltg > this.params.page * this.params.page_size) {
					this.params.page++
					this.articleList()
				}
			},
			articleList() {
				uni.request({
					url: this.configs.webUrl + '/api/article/articleList',
					data: this.params,
					success: data => {
						this.listtg = this.listtg.concat(data.data.list)
						this.totaltg = data.data.count
					}
				})
			},
			getList() {
				let this_ = this
				let data = {
					lang: uni.getStorageSync('language')
				};
				uni.request({
					url: this.configs.webUrl + '/api/video/indexdata',
					data: data,
					success: data => {
						//console.log(data.data)
						uni.setStorage({ //缓存配置信息
							key: 'config',
							data: data.data.config
						})
						this.banners = data.data.config.banner
						this.datasa = data.data.new
						this.hotdata = data.data.hotdata
						this.givedata = data.data.givedata
					},
					fail: (data, code) => {}
				});
			},
			detail(vid, mid) {
				var fxpid = 1
				if (uni.getStorageSync("userinfo")) {
					fxpid = uni.getStorageSync("userinfo").id
				}
				uni.navigateTo({
					url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
				})
			},
			jumpPage(path) {
				uni.navigateTo({
					url: `/pages/client/${path}`
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.top {
		position: fixed;
		top: 0;
		z-index: 20;
		width: 100%;
		background: linear-gradient(180deg, #F75581 0%, #e15aba 100%);

		.cont {
			width: calc(100% - 40px);
			padding: 10rpx 0;
			margin-left: 20px;
			border-bottom: 20px;
			font-size: 32rpx;
			font-family: font-wwe !important;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 45px;
			text-align: center;
			position: relative;

			image {
				position: absolute;
				left: 0;
				bottom: 9px;
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.content {
		position: fixed;
		z-index: 10;
		height: calc(100vh - 92px);
		position: relative;

		.topbj {
			position: absolute;
			top: 0;
			width: 100%;
			height: 68px;
			border-radius: 0 0 70% 70%;
			background: linear-gradient(180deg, #e15aba 0%, #C860FF 100%);
		}

		.home-header {
			padding: 0 30rpx;
		}
	}
</style>
<style>
	.home-header {
		/* height: 300rpx; */
		width: 100%;
		position: relative;
		border-radius: 0rpx 0rpx 48rpx 48rpx;
	}

	.home-main {
		width: 100%;
		position: relative;
		margin-top: -156rpx;
		padding: 0 30rpx;
	}

	.home-mendian {
		width: 100%;
		height: 84rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 42rpx;
	}

	.integral-mall-header {
		position: relative;
		height: 320rpx;
	}

	.integral-mall-header .bg {
		width: 100%;
		height: 320rpx;
	}

	.integral-mall-header .main {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 320rpx;
	}

	.swiper-integral {
		height: 32rpx;
		width: 100%;
	}

	.integral-mall-main {
		position: relative;
		/* margin-top: -104rpx; */
	}

	.integal-mall-menu {
		width: 100%;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.integral-tuan-l {
		width: 100%;
		height: 280rpx;
		background: #f2f2f2;
		border-radius: 16rpx;
	}


	.integral-mall-coupon {
		background: #FFFFFF;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.integral-mall-coupon .top {
		padding: 0rpx 0rpx 24rpx 0rpx;
		border-bottom: 2rpx dashed #FEC675;
	}

	.integral-mall-coupon .y-l,
	.integral-mall-coupon .y-r {
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #F5F6FA;
		position: absolute;
		z-index: 2;
		top: 284rpx;
	}

	.integral-mall-coupon .y-l {
		left: -10rpx;
	}

	.integral-mall-coupon .y-r {
		right: -10rpx;
	}

	.integral-mall-coupon .coupon-value {
		width: 100%;
	}

	.integral-mall-coupon .coupon-value image {
		width: 100%;
	}

	.integral-mall-coupon .coupon-value .num {
		width: 100%;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
	}

	.integral-mall-goods {
		width: 100%;
		height: 280rpx;
		background: #F2F2F2;
		border-radius: 16upx;
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		padding-top: 44px;
		box-sizing: content-box;
	}
</style>